<template>
  <div class="flex-v flex" style="height: 100%">
    <div @click="goBack" class="flexBack">
      <img src="../../assets/image/zxl/fanhui.png" style="width: 8px; height: 12px; margin-right: 4px" />
      <span>返回</span>
    </div>
    <div class="infoBox">
      <div class="bottomBox">
        <div class="flex width100 borderbottomea paddingbottom20 box-align-center">
          <div class="zi1 flex">员工管理</div>
        </div>
        <div class="flex box-align-center mt20">
          <img src="@/assets/image/cf/img29.png" alt="" />
          <div class="zi2">参与人</div>
        </div>

        <div>
          <el-button type="primary" size="mini" color="#01509f" style="font-size: 15px" icon="Plus" @click="add" class="mt20">添加参与人</el-button>
          <el-button v-if="formadd.type == '规章制度签署' || formadd.type == '自定义签署'" type="primary" size="mini" color="#01509f" style="font-size: 15px" @click="showDialog1 = true" class="mt20">
            批量导入
          </el-button>
          <el-button v-if="formadd.type == '自定义签署'" type="primary" size="mini" color="#01509f" style="font-size: 15px" @click="add" class="mt20">添加企业</el-button>
        </div>

        <el-table
          :data="list"
          border
          class="mt20"
          v-loading="loading"
          element-loading-background="rgba(0, 0, 0, 0.5)"
          empty-text="暂无数据"
          element-loading-text="加载中..."
          header-row-class-name="table-header"
        >
          <el-table-column label="任务主题" align="center" prop="zhuti" v-if="formadd.type != '规章制度签署'" />
          <el-table-column label="经办人证号" align="center" prop="zhenghao" v-if="formadd.type != '规章制度签署'">
            <template #default="{ row, $index }">
              <div v-if="row.type == 0">
                {{ row.zhenghao }}
              </div>
              <div v-else class="flex">
                <el-input v-model="row.name" placeholder="员工姓名"></el-input>
                <el-input v-model="row.phone" class="ml10" placeholder="手机号码"></el-input>

                <el-button type="primary" size="mini" color="#01509f" class="ml10" style="font-size: 15px" @click="addradio($index)">导入员工</el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="员工姓名" align="center" prop="name" v-if="formadd.type == '规章制度签署'">
            <template #default="{ row, $index }">
              <div class="flex">
                <el-input v-model="scope.row.name" placeholder="员工姓名"></el-input>

                <el-button type="primary" size="mini" color="#01509f" class="ml10" style="font-size: 15px" @click="addradio($index)">导入员工</el-button>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="手机号码" align="center" prop="phone" v-if="formadd.type == '规章制度签署'">
            <template #default="scope">
              <el-input v-model="scope.row.phone" class="ml10" placeholder="手机号码"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="签署要求" align="center" prop="yaoqiu" width="200" />
          <el-table-column label="操作" align="center" width="180">
            <template #default="scope">
              <el-button v-if="scope.row.type == 1" style="font-size: 16px; color: #ff4345" text icon="Delete" @click="deleteItem(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="flex box-align-center mt20">
          <img src="@/assets/image/cf/img28.png" alt="" />
          <div class="zi2">合同基本信息</div>
        </div>

        <div class="mt20 flex flex-v">
          <el-form ref="ruleFormRef" label-position="right" label-width="140px" :model="formadd" :rules="rules" class="form-inline">
            <div class="flex flex-v" style="width: 40%">
              <el-form-item class="" label="选择文件:" prop="name">
                <el-upload
                  class="avatar-uploader"
                  ref="uploadRef"
                  name="file"
                  :limit="1"
                  drag
                  :auto-upload="false"
                  accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                  action
                  :multiple="false"
                  :on-exceed="handleExceed"
                  :file-list="filelist"
                  :on-change="handleChansge"
                >
                  <!-- :before-upload="beforeUpload" -->
                  <div class="flex box-row-column box-align-center">
                    <el-icon size="30" color="#01509f"><UploadFilled /></el-icon>
                    <div class="el-upload_tip">点击或者拖拽需要上传的文件</div>
                    <div class="el-upload_tip">文件不超过2M,只支持word格式文件</div>
                  </div>
                </el-upload>
              </el-form-item>
              <el-form-item class="" label="合同名称:" prop="name">
                <el-input v-model="formadd.name" placeholder="请输入合同名称" />
              </el-form-item>
              <el-form-item class="" label="合同类型:">
                <el-select v-model="formadd.type" placeholder="请选择合同类型" @change="changeType">
                  <el-option key="1" label="入职签署" value="入职签署" />
                  <el-option key="2" label="到期续签" value="到期续签" />
                  <el-option key="3" label="规章制度签署" value="规章制度签署" />
                  <el-option key="4" label="调岗签署" value="调岗签署" />
                  <el-option key="4" label="离职签署" value="离职签署" />
                  <el-option key="4" label="自定义签署" value="自定义签署" />
                </el-select>
              </el-form-item>
              <el-form-item class="" label="入职时间:" prop="become_time" v-if="formadd.type == '入职签署'">
                <el-date-picker v-model="formadd.become_time" type="date" format="YYYY/MM/DD" value-format="YYYY-MM-DD" placeholder="请选择入职时间"></el-date-picker>
              </el-form-item>
              <el-form-item class="" label="入职时间:" prop="time" v-if="formadd.type == '入职签署'">
                <el-date-picker
                  v-model="formadd.time"
                  type="daterange"
                  range-separator="-"
                  format="YYYY/MM/DD"
                  value-format="YYYY-MM-DD"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  placeholder="请选择入职时间"
                ></el-date-picker>
              </el-form-item>

              <el-form-item class="" label="劳动试用期:" v-if="formadd.type == '入职签署'">
                <el-select v-model="formadd.qixian" placeholder="劳动试用期" @change="changeType" style="width: 200px">
                  <el-option key="1" label="无试用期" value="1" />
                  <el-option key="2" label="一个月" value="2" />
                  <el-option key="3" label="二个月" value="3" />
                  <el-option key="4" label="三个月" value="4" />
                  <el-option key="5" label="四个月" value="5" />
                  <el-option key="6" label="五个月" value="6" />
                  <el-option key="7" label="六个月" value="7" />
                </el-select>
              </el-form-item>
              <el-form-item class="" label="试用期薪资:" v-if="formadd.type == '入职签署'">
                <el-input v-model="formadd.name" placeholder="请输入试用期薪资" />
              </el-form-item>
              <el-form-item class="" label="转正薪资:" v-if="formadd.type == '入职签署'">
                <el-input v-model="formadd.name" placeholder="请输入转正薪资" />
              </el-form-item>

              <!--规章制度签署 -->
              <el-form-item class="" label="生效时间:" prop="become_time" v-if="formadd.type == '规章制度签署'">
                <el-date-picker v-model="formadd.become_time" type="date" format="YYYY/MM/DD" value-format="YYYY-MM-DD" placeholder="请选择入职时间"></el-date-picker>
              </el-form-item>
              <!--规章制度签署结束 -->
              <!-- 到期续签出现 -->
              <el-form-item class="" label="劳动合同时间:" prop="time" v-if="formadd.type == '到期续签'">
                <el-date-picker
                  v-model="formadd.time"
                  type="daterange"
                  range-separator="-"
                  format="YYYY/MM/DD"
                  value-format="YYYY-MM-DD"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  placeholder="请选择劳动合同时间"
                ></el-date-picker>
              </el-form-item>

              <el-form-item class="" label="劳动合同期:" v-if="formadd.type == '到期续签'">
                <div class="flex justify-content-center">
                  <el-select v-model="formadd.qixian" placeholder="劳动合同期" @change="changeType" style="width: 200px">
                    <el-option key="1" label="无固定期限" value="1" />
                    <el-option key="2" label="6个月" value="2" />
                    <el-option key="3" label="12个月" value="3" />
                    <el-option key="4" label="24个月" value="4" />
                    <el-option key="4" label="36个月" value="5" />
                    <el-option key="4" label="自定义合同期限" value="6" />
                  </el-select>
                  <el-input v-model="formadd.qixianzdy" placeholder="请输入劳动合同期" v-if="formadd.qixian == '6'" style="width: 150px; margin-left: 20px" />
                </div>
              </el-form-item>
              <!-- 到期续签结束 -->
              <!-- 调岗签署出现 -->

              <el-form-item class="" label="调岗时间:" prop="become_time" v-if="formadd.type == '调岗签署'">
                <el-date-picker v-model="formadd.become_time" type="date" format="YYYY/MM/DD" value-format="YYYY-MM-DD" placeholder="请选择调岗时间"></el-date-picker>
              </el-form-item>
              <el-form-item class="" label="调岗部门:" v-if="formadd.type == '调岗签署'">
                <el-input v-model="formadd.name" placeholder="请输入调岗部门" />
              </el-form-item>
              <el-form-item class="" label="调岗职位:" v-if="formadd.type == '调岗签署'">
                <el-input v-model="formadd.name" placeholder="请输入调岗职位" />
              </el-form-item>
              <!-- 调岗签署出现结束 -->

              <!-- 离职签署出现 -->
              <el-form-item class="" label="离职时间:" prop="become_time" v-if="formadd.type == '离职签署'">
                <el-date-picker v-model="formadd.become_time" type="date" format="YYYY/MM/DD" value-format="YYYY-MM-DD" placeholder="请选择离职时间"></el-date-picker>
              </el-form-item>
              <!-- 离职签署出现结束 -->

              <div class="flex mt20 box-align-center font14 tishired" v-if="formadd.type == '入职签署'">
                <el-icon color="#ff4345" size="18"><Warning /></el-icon>
                上述信息如有改动会同步至员工档案
              </div>
            </div>
            <div class="flex flex-v">
              <div class="flex box-align-center mt20">
                <img src="@/assets/image/cf/img30.png" alt="" />
                <div class="zi2">其他信息</div>
              </div>
              <div class="mt20">
                <el-form-item class="" label="签订截止日期:" prop="jiezhitime">
                  <div class="flex">
                    <el-date-picker v-model="formadd.jiezhitime" type="date" format="YYYY/MM/DD" value-format="YYYY-MM-DD" placeholder="请选择入职时间"></el-date-picker>
                    <div class="font14 color333 ml20">如果流程在指定日期过后还没有签订完成，则本次签署自动过期，无法继续签订</div>
                  </div>
                </el-form-item>
              </div>
            </div>
          </el-form>
        </div>
      </div>
    </div>

    <div class="bottomdiv mt20 flex box-align-center justify-content-end">
      <el-button type="primary" size="mini" color="#01509f" style="font-size: 15px" @click="add" class="mr20">下一步</el-button>
    </div>
  </div>

  <ChooseUser v-model="showDialog" @submit-item="handleSuccess" />
  <ChooseUser1 v-model="showDialog1" @submit-list="handleSuccess1" />
</template>
<script setup lang="ts">
  import { onMounted, reactive, ref } from "@/TUIKit/adapter-vue";
  import { useRouter, useRoute } from "vue-router";

  import type { TabsPaneContext, ElMessage, ElMessageBox, FormInstance, FormRules } from "element-plus";
  import { user_delete, invite_sms } from "@/api/cf";
  import { become_handle, resign_handle, set_enable, user_info } from "@/api/xl";
  import ChooseUser from "@/components/ChooseUser.vue";
  import ChooseUser1 from "@/components/ChooseUser1.vue";

  const basicCom = ref(null);
  const entryCom = ref(null);
  const jobCom = ref(null);
  const resignCom = ref(null);
  const router = useRouter();
  const route = useRoute();

  const loading = ref(false);
  // const activeName = ref('one')
  const ruleFormRef = ref(null);
  const formadd = ref({
    name: "",
    type: route.params.name ? route.params.name : "",
    become_time: "",
    time: "",
    qixian: "",
    qixianzdy: "",
    become_desc: "",
    resign_time: "",
    resign_type: "",
    resign_reason: "",
    resign_desc: "",
    jiezhitime: "",
  });
  const showDialog = ref(false);

  const showDialog1 = ref(false);
  const list = ref([]);
  const goBack = () => {
    //router.push({ name: 'employeeList' });
    router.back();
  };

  const rules = reactive<FormRules>({
    name: [{ required: true, message: "请输入员工姓名", trigger: "blur" }],
    hired_time: [{ required: true, message: "请选择入职日期", trigger: "change" }],
    become_time: [{ required: true, message: "请选择转正日期", trigger: "change" }],
  });

  const rules1 = reactive<FormRules>({
    name: [{ required: true, message: "请输入员工姓名", trigger: "blur" }],
    hired_time: [{ required: true, message: "请选择入职日期", trigger: "change" }],
    resign_time: [{ required: true, message: "请选择离职日期", trigger: "change" }],
    resign_type: [{ required: true, message: "请选择离职类型", trigger: "change" }],
    resign_reason: [{ required: true, message: "请选择离职原因", trigger: "change" }],
  });

  onMounted(() => {
    if (formadd.value.type == "规章制度签署" || formadd.value.type == "自定义签署") {
      list.value = [{ zhuti: "", zhenghao: "", yaoqiu: "", type: 0, name: "", phone: "", id: -1 }];
    } else {
      list.value = [{ zhuti: "某某公司", zhenghao: "1234567890", yaoqiu: "模板章", type: 0, name: "", phone: "", id: -1 }];
    }
  });
  const radioindex = ref(0);
  const addradio = index => {
    radioindex.value = index;
    console.log(radioindex.value, "sggggggg");
    showDialog.value = true;
  };

  const handleSuccess = item => {
    console.log(list.value[radioindex.value]);

    list.value[radioindex.value].name = item.name;
    list.value[radioindex.value].phone = item.mobile;
    list.value[radioindex.value].id = itme.id;
    showDialog.value = false;
  };

  const handleSuccess1 = item => {
    console.log(item);

    item.forEach(item => {
      list.value.push({
        zhuti: item.name,
        zhenghao: item.mobile,
        yaoqiu: item.name,
        type: 0,
        name: "",
        phone: "",
        id: item.id,
      });
    });
    showDialog1.value = false;
    // list.value = item;
  };
  const changeType = () => {
    if (formadd.value.type == "规章制度签署" || formadd.value.type == "自定义签署") {
      list.value = [];
    } else {
      list.value = [{ zhuti: "某某公司", zhenghao: "1234567890", yaoqiu: "模板章", type: 0, name: "", phone: "", id: -1 }];
    }
  };
  const deleteItem = row => {
    const index = list.value.findIndex(item => item.id === row.id);
    if (index !== -1) {
      list.value.splice(index, 1);
    }
  };
  const add = () => {
    const data = {
      zhuti: "个人",
      zhenghao: "1234567890",
      yaoqiu: "模板章",
      type: 1,
      name: "",
      phone: "",
      id: list.value.length + 1,
    };
    list.value.push(data);
  };

  const getUserInfo = () => {
    user_info(userId).then(res => {
      console.log(res);
      userInfo.value = res.data;
    });
  };
</script>

<style lang="scss">
.infoBox {
  overflow-y: scroll;
  height: 100%;

  &::-webkit-scrollbar {
    display: none;
  }
}

.bottomdiv {
  background-color: #fff;
  width: 100%;
  height: 60px;
}

.el-table__header .table-header th {
  font-size: 16px;
  background: #f3f8fb;
  height: 53px;
  color: #6f7070;
  font-weight: normal;
}

.zi1 {
  font-size: 20px;
  color: #01509f;
  // font-family: 黑体;
  font-weight: bold;
}

.zi2 {
  font-size: 17px;
  color: #01509f;
  // font-family: 黑体;
  margin-top: -2px;
  margin-left: 4px;
}

.bottomBox {
  background-color: #fff;
  border-radius: 12px;
  padding: 17px;
  box-sizing: border-box;
  margin-top: 22px;

  .bottomTopBox {
    padding-bottom: 18px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eaeaea;

    .bottomTitle {
      font-size: 20px;
      color: #333;
      font-weight: bolder;
      flex: 1;
    }

    .bottomRightBox {
      display: flex;
      align-items: center;

      .btnItem1 {
        border-radius: 6px;
        width: 108px;
        height: 36px;
        text-align: center;
        line-height: 30px;
        box-sizing: border-box;
        font-size: 16px;
        // color: #333;
      }

      .btnItem2 {
        border: none;
        border-radius: 6px;
        width: 72px;
        height: 36px;
        text-align: center;
        line-height: 30px;
        box-sizing: border-box;
        font-size: 16px;
      }
    }
  }
}

.avatar-uploader {
  width: 100%;
  text-align: center;
}

.el-upload_tip {
  font-size: 15px;
  color: #999;
}

.el-upload {
  width: 100%;
}

.tishired {
  background-color: #feeeec;
  line-height: 34px;
  font-size: 14px;
  border-radius: 4px;
  padding: 0 10px;
  color: #333;
}
</style>
